<#include "layout/layout.ftl">
<#macro overrideHead>
<title>${blog.title!''}</title>
</#macro>
<#macro overrideContainer>
<!-- Page Content -->
<div class="container" style="background-color: #fff;padding-top:20px;">
    <div class="row">
        <!-- Blog Entries Column -->
        <div class="col-md-12">
            <div class="blog-one">
                <input type="hidden" id="blogId" value="${blog.id}">
                <h2>
                    <a href="/blog/${blog.id}" class="blog-title-new">${blog.title!''}</a>
                </h2>
                <p>
                    <span><i class="fa fa-eye" aria-hidden="true"></i> ${(blog.blogStatistics.viewCount)!0}</span> .
                    <span><i class="fa fa-thumbs-o-up" aria-hidden="true"></i> ${(blog.blogStatistics.likeCount)!0}</span> .
                    <span><i class="fa fa-comments-o" aria-hidden="true"></i> ${(blog.blogStatistics.commentCount)!0}</span> .
                    <span class="glyphicon glyphicon-time"></span> Posted on ${(blog.createTime?string("yyyy-MM-dd"))!''}
                </p>
                <div class="blog-subject">
                    ${blog.subject!''}
                </div>
                <div class="blog-content" style="overflow-x: hidden;">
                ${blog.content!''}
                </div>
                <hr>
            </div>
            <nav>
                <div style="text-align: center">
                    <a class="likeCls" href="javascript:;" data-bid="${blog.id}"><span><i class="fa fa-thumbs-o-up fa-lg" aria-hidden="true"></i> Like </span></a>&nbsp;&nbsp;
                    <a class='replyCls' href="javascript:;" data-id='' data-bid='${blog.id}' data-uid='' data-level='0' ><span><i class="fa fa-comments-o fa-lg" aria-hidden="true"></i> Reply </span></a>
                </div>
                <ul class="pager">
                    <#if map.prev??>
                        <li class="previous"><a href="/blog/${map.prev.id}" style="border: 0px;border-radius: 0px;"><span aria-hidden="true">上一篇：</span> ${map.prev.title}</a></li>
                    </#if>
                    <#if map.next??>
                        <li class="next"><a href="/blog/${map.next.id}" style="border: 0px;border-radius: 0px;"><span aria-hidden="true">下一篇：</span> ${map.next.title}</a></li>
                    </#if>
                </ul>
            </nav>
        </div>
    </div>
    <h4>Comments</h4>
    <div class="comment-history"></div>
    <!-- Footer -->
    <footer>
        <div class="row">
            <div class="col-lg-12">
                <p>Copyright &copy; <a href="http://blog.taoluoluo.win">blog.taoluoluo.win</a> 2016</p>
            </div>
            <!-- /.col-lg-12 -->
        </div>
        <!-- /.row -->
    </footer>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    </div>
</div>
</#macro>
<#macro overrideScript>
<script>
    function cycleHandler(node) {
        var dom = "";
        var comment = node.node;
        if(comment!=null){
            dom += "<div class='media'>" +
                    "<a class='pull-left' href='"+comment.replyerHome+"'>" +
                    "<img src='"+comment.replyerHead+"' alt='User Avatar' style='width: 40px; height: 40px;'>" +
                    "</a>"+
                    "<div class='media-body'>" +
                    "<div class='media-heading'>" +
                    "<a href='"+comment.replyerHome+"' style='font-size: 16px;'>"+comment.replyerName+"</a>" +
                    "<small style='display: block'>"+getFormatDateByLong(comment.createTime)
                    +" / <a class='replyCls' data-id='"+comment.id+"' data-bid='"+comment.blogId+"' data-uid='"+comment.replyerId+"' data-level='"+comment.level+"' >Reply</a></small>"+
                    "</div>" +
                    comment.comment;
        }
        var children = node.children;
        if(children!=null && children.length >0){
            for(var i=0;i<children.length;i++){
                dom +=cycleHandler(children[i]);
            }
        }
        if(comment!=null){
            dom += "</div></div>";
        }
        return dom;
    }

    function initComments() {
        var blogId = $("#blogId").val();
        $.post("/comments/"+blogId,function (data) {
            if(data==null||data.children==null){
                $(".comment-history").html("no comments");
            }else{
                var ul = cycleHandler(data);
                if(ul!=""){
                    ul = "<div class='media-list m-top-lg'>" +ul+ "</div>";
                }
                $(".comment-history").html(ul);
            }
        });
    }

    $(function(){
        initComments();
        $(document).on("click",".replyCls",function () {
            var pid = $(this).attr("data-id");
            var blogId = $(this).attr("data-bid");
            var receiverId = $(this).attr("data-uid");
            var level = Number($(this).attr("data-level"))+1;
            var params = [];
            params.push({name:'pid',value:pid});params.push({name:'blogId',value:blogId});params.push({name:'receiverId',value:receiverId});params.push({name:'level',value:level});
            $.post("/comment/reply",params,function(data){
                $('#myModal').html(data);
            });
            $('#myModal').modal({backdrop: 'static', keyboard: false ,show:true});
        });
        $(document).on("click",".likeCls",function () {
            var blogId = $(this).attr("data-bid");
            $.post("/blog/like/"+blogId,function(data){
                if(data){
                    alert("success!");
                }else {
                    alert("you've already click this!");
                }
            });
        });
    })
</script>
</#macro>
<@layout head=overrideHead container=overrideContainer script=overrideScript>
</@layout>